<template>
	<view>
		<view class="wrap flex column align-center" v-if="shopInfo">
			<view class="wrap-shop-info flex align-center">
				<image class="logo" :src="$getImageURL(shopInfo.avatar)" />
		
				<view class="name fBold f-30 limit-num-line">付款给{{ shopInfo.shopname }}</view>
			</view>
		
			<view class="wrap-price">
				<view class="title f-30">金额</view>
		
				<view class="price-bg">
					<input
						type="digit"
						maxlength="8"
						class="input fBold f-60"
						placeholder="请输入支付的金额"
						placeholder-class="place f-26"
						v-model="money"
						@blur="onBlur"
						@focus="isInput = true"
					/>
				</view>
			</view>
		
			<view class="wrap-pay-method" v-show="money !== '' && !isInput">
				<payMethodsVue :type.sync="type" :method.sync="method" :money="lastMoney" :payMethod.sync="payMethod" />
			</view>
		
			<view class="pay-btn theme-gradient-btn f-30" v-if="money !== '' && !isInput" @click="onPay"> 支付 </view>
		</view>
		
		<passwordPopupVue :isShow.sync="isShowPwd" @onFinish="onFinish" />
	</view>
</template>

<script>
	import { scanCreateOrder } from "@/API/home.js";
	import payMethodsVue from "@/components/common/payMethods.vue";
	import passwordPopupVue from "@/components/common/passwordPopup.vue";
	export default {
		components: {
			payMethodsVue,
			passwordPopupVue
		},
		data() {
			return {
				shopInfo: null,
				passwordType: null, //支付密码状态

				money: "", //输入的金额
				lastMoney: "",
				paymethods: "", //支付方式

				isInput: false, //是否输入金额

				type: "", //支付方式
				method: "", //支付方式
				payMethod: [], //组合支付方式
				
				isShowPwd: false, //是否展示支付密码
			};
		},
		onLoad(options) {
			if (options.shopInfo) {
				this.shopInfo = JSON.parse(options.shopInfo);
			}
		},
		onShow() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.passwordType = res.is_avoid;
			});
		},
		methods: {
			/**
			 * 结束输入
			 */
			onBlur() {
				this.isInput = false;
				this.lastMoney = this.money;
			},
			/**
			 * 支付
			 */
			onPay() {
				if (this.money === "") {
					this.$st.show("请输入支付的金额");
					return;
				}
				if (this.type === "") {
					this.$st.show("请选择支付方式");
					return;
				}
				if (this.method === "make_up" && this.payMethod.length === 0) {
					this.$st.show("请选择支付的钱包");
					return;
				}
				if (this.type === 'balance' && this.passwordType === null) {
					this.$st.show("请设置支付密码", () => {
						this.$jump.to("/pages/mine/setting/payPassword")
					})
					return;
				}
				if (this.type === "balance" && this.passwordType === 0) {
					this.isShowPwd = true;
					return;
				}
				this.onSurePay("");
			},
			/**
			 * 确认支付
			 */
			onSurePay(password) {
				this.$throttle(() => {
					scanCreateOrder({
						money: this.money,
						shop_id: this.shopInfo.id,
					}).then((res) => {
						this.getPaymentInfo(res.data.list.order_id, res.data.token, password);
					})
				})
			},
			/**
			 * 支付密码完成
			 */
			onFinish(e) {
				this.onSurePay(e);
			},
			/**
			 * 获取支付信息
			 */
			getPaymentInfo(order_id, token, password) {
				wx.login({
					success: (loginRes) => {
						let obj = {
							method: this.method,
							order_id: order_id,
							pay_method: this.payMethod,
							type: this.type,
							token: token,
							order_type: "offline",
							code: loginRes.code,
							password: password,
						};
						this.$commonNetwork.getPaymentInfoData(obj, (res) => {
							if (res.code === 1) {
								if (res.data.length === 0) {
									this.$st.success("支付成功", () => {
										uni.navigateBack();
									});
								} else {
									this.$filters.onPayFunction(res.data, (index) => {
										if (index === 1) {
											this.isShowPwd = false;
											uni.navigateBack();
										}
									});
								}
							}
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 25rpx;
		box-sizing: border-box;
		gap: 20rpx;

		.wrap-shop-info {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			gap: 20rpx;

			.logo {
				width: 80rpx;
				height: 80rpx;
			}

			.name {
				flex: 1;
				--limit-num: 1;
				color: #333333;
			}
		}

		.wrap-price {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 10rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.title {
				color: #333333;
			}

			.price-bg {
				margin-top: 20rpx;
				width: 100%;
				height: 100rpx;
				border-bottom: 2rpx solid #eeeeee;

				.input {
					width: 100%;
					height: 100%;
					color: #333333;
				}

				/deep/ .place {
					font-weight: normal;
					color: #cacaca;
				}
			}
		}

		.wrap-pay-method {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 10rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.title {
				color: #333333;
			}
		}

		.pay-btn {
			margin-top: 50rpx;
		}
	}
</style>
